<template>
  <div class="inhosp">
    <!-- 筛选表单 -->
    <div class="inhosp_header">
      <!-- 修改闭环下拉框 -->
      <el-select
        v-model="patientStore.closeOklistValueId"  
        size="small"
        style="width: 150px; margin-right: 12px"
        @change="handleSearch"
        filterable
        placeholder="请选择闭环"
      >
      <el-option
         label="全部"
        value="all" 
      />
        <el-option
          v-for="item in patientStore.closeOkList"
          :key="item.CLOSE_LOOP_ID"
          :label="item.CLOSE_LOOP_NAME"
          :value="item.CLOSE_LOOP_ID.toString()"  
        />
      </el-select>

      <el-select
        v-model="patientStore.deptListValueId"
        size="small"
        style="width: 150px; margin-right: 12px"
        filterable
        placeholder="请选择科室"
      >
      <el-option
        label="全部"
        value="all" 
      />
        <el-option
          v-for="item in patientStore.deptList"
          :key="item.DEPT_ID"
          :label="item.DEPT_NAME"
          :value="item.DEPT_ID.toString()"
        />
      </el-select>

      <!-- <el-select
        v-model="patientStore.areaListValue"
        size="small"
        style="width: 150px; margin-right: 12px"
        @change="handleSearch"
        filterable
        placeholder="选择病区"
      >
        <el-option
          v-for="item in patientStore.areaList"
          :key="item.DISTRICT_ADMISSION_TO_ID"
          :label="item.DISTRICT_ADMISSION_TO_NAME"
          :value="item"
        />
      </el-select> -->

      <el-input
        v-model="patientStore.patName"
        size="small"
        placeholder="患者姓名"
        clearable
        style="width: 200px; margin-right: 12px"
        @clear="handleSearch"
        @keyup.enter="handleSearch"
      />

      <el-date-picker
        v-model="patientStore.timeline"
        type="daterange"
        size="small"
        style="width: 250px; margin-right: 12px"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
      />

      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="handleSearch"
        style="margin-right: 12px"
      >
        查询
      </el-button>
    </div>

    <!-- 患者列表表格 -->
    <div class="inhosp_table">
      <el-table
        :data="patientStore.patientList"
        border
        style="width: 100%; margin-top: 20px"
        v-loading="loading"
      >
        <el-table-column
          prop="PAT_NAME"
          label="患者姓名"
          width="120"
        />
        <el-table-column
          prop="SEX"
          label="性别"
          width="80"
        />
        <el-table-column
          prop="BIRTHDAY"
          label="年龄"
          width="80"
          :formatter="calculateAge"
        />
        <el-table-column
          prop="INP_TIME"
          label="入院时间"
          width="160"
          :formatter="formatDate"
        />
        <el-table-column
          prop="OUT_INP_TIME"
          label="出院时间"
          width="160"
          :formatter="formatDate"
        />
        <el-table-column
          prop="DEPT_NAME"
          label="科室"
          width="150"
        />
        <el-table-column
          prop="PAT_ID"
          label="住院号"
          width="150"
        />
        <el-table-column
          prop="PAT_ID"
          label="操作"
          width="150"
        />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { usePatientStore } from '@/stores/patient.js';
import { getCloseOkList, getDeptList, getInOutHospList } from '@/api/api.js';

const patientStore = usePatientStore();
const loading = ref(false);

// 初始化所有下拉框数据
onMounted(async () => {
  try {
    
    // 获取下拉框数据
    const closeOkList = await getCloseOkList();
    if (closeOkList.code === 200) {
      patientStore.closeOkList = closeOkList.data;
    }

    const deptList = await getDeptList();
    if (deptList.code === 200) {
      patientStore.deptList = deptList.data;
    }

    // 初始化时不主动查询，仅加载下拉框数据
  } catch (error) {
    console.error('初始化数据失败:', error);
  }
});

// 查询方法
const handleSearch = async () => {
  console.log("开始执行查询"); // 添加此行
  loading.value = true;
  try {

    // 处理“全部”选项的 value
    const closeLoopId = patientStore.closeOklistValueId === 'all' ? null : patientStore.closeOklistValueId;
    const deptId = patientStore.deptListValueId === 'all' ? null : patientStore.deptListValueId;
    // 收集所有参数（直接使用 store 中的 ID 值）
    const params = {
      closeLoopId , // 直接使用 ID
      deptId ,
      patName: patientStore.patName || '',
      startTime: patientStore.timeline?.[0] || '',
      endTime: patientStore.timeline?.[1] || '',
    };

    // 调用 API
    const result = await getInOutHospList(params);
    if (result.code === 200) {
      patientStore.patientList = result.data.list;
    }
  } catch (error) {
    console.error('查询失败:', error);
  } finally {
    loading.value = false;
  }
};

// 日期格式化（假设后端返回的是时间戳）
const formatDate = (row, column) => {
  const date = row[column.property];
  if (!date) return '';
  return new Date(date).toLocaleDateString();
};
//年龄处理
const calculateAge = (row) => {
  const birthDate = new Date(row.BIRTHDAY);
  const today = new Date();
  let age = today.getFullYear() - birthDate.getFullYear();
  const monthDiff = today.getMonth() - birthDate.getMonth();
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  return age;
};
</script>

<style scoped>
.inhosp_header {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 4px;
}

.inhosp_table {
  margin-top: 20px;
}
</style>

<style scoped>
.inhosp {
  padding: 20px;
}

.inhosp_header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
<style scoped>
.form-container {
    width: 60%;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    box-sizing: border-box;
}

.form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.form-group > * {
    flex: 1;
    max-width: calc(25% - 15px);  /* 四个元素时的宽度 */
}

.date-range {
    flex: 2;
    max-width: calc(40% - 15px);  /* 日期范围组合宽度 */
}

.date-range input {
    flex: 1;
    margin-right: 5px;
}

.date-range span {
    margin: 0 8px;
}

.button-wrapper {
    flex: 1;
    max-width: 120px;
    text-align: right;
}

select, input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    padding: 8px 16px;
    background: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background: #1976D2;
}
</style>
